<template>
  <NavigationBar>
    <Row style="margin-top: 25px" :gutter="30">
      <i-col span="14">
        <div style="text-align: center">
          <div class="title">此博客纯属练手！！</div>
          <div class="title">不会前端的，不会后端的摸鱼攻城狮！！</div>
          <div class="title">响应是不可能会做响应的！！</div>
          <div class="title">小程序倒是有！</div>
          <div class="image">
            <Avatar shape="square" src="http://dd.ddandang.top/blog/oFAPJ5U9uq1IZNqwO-u6Yl873IS0.jpg" size="200" />
          </div>
        </div>
      </i-col>
      <i-col span="10">
        <Card class="animate__animated animate__jackInTheBox">
          <List>
            <div v-for="(item, index) in messageList" :key="index">
              <ListItem>
                <ListItemMeta :avatar="item.avatar" :title="item.nickname" :description="item.content" />
                {{item.gmtCreate | time}}
                <Avatar style="margin-left: 20px" v-if="item.position" src="http://dd.ddandang.top/blog/images/admin.png" size="30"/>
                <template slot="action">
                  <li v-if="$store.state.user.position">
                    <a @click="updateTopping(item.id, false)" v-if="item.topping">取消置顶</a>
                    <a @click="updateTopping(item.id, true)" v-else>置顶</a>
                  </li>
                  <li v-if="$store.state.user.position">
                    <a @click="reply(item.id, item.nickname)">回复</a>
                  </li>
                  <li v-if="$store.state.user.userId === item.userId || $store.state.user.position">
                    <a @click="deleteMessage(item.id)" style="color: red">删除</a>
                  </li>
                </template>
              </ListItem>
              <List v-if="item.childrenMessage.length !== 0" class="reply">
                <ListItem v-for="(chlidren, chlidrenIndex) in item.childrenMessage" :key="chlidrenIndex">
                  <ListItemMeta :avatar="chlidren.avatar" :title="chlidren.nickname" :description="chlidren.content" />
                  {{chlidren.gmtCreate | time}}
                  <Avatar style="margin-left: 20px" v-if="chlidren.position" src="http://dd.ddandang.top/blog/images/admin.png" size="30"/>
                  <template slot="action">
                    <li v-if="$store.state.user.position">
                      <a @click="updateTopping(chlidren.id, false)" v-if="chlidren.topping">取消置顶</a>
                      <a @click="updateTopping(chlidren.id, true)" v-else>置顶</a>
                    </li>
                    <li v-if="$store.state.user.userId === chlidren.userId || $store.state.user.position">
                      <a @click="deleteMessage(chlidren.id)" style="color: red">删除</a>
                    </li>
                  </template>
                </ListItem>
              </List>
            </div>

          </List>

          <!--分页-->
          <div style="margin-top: 40px;text-align: center;">
            <Page :current="pageNo" v-if="total>pageSize" @on-change="changeSize" :page-size="pageSize" :total="total" show-total/>
          </div>

          <Row :gutter="2" style="margin-top: 25px" >
            <i-col style="text-align: center" span="3" v-if="$store.state.user.avatar !== ''">
              <Avatar :src="$store.state.user.avatar" size="40"></Avatar>
            </i-col>
            <i-col span="18">
              <i-input v-model="message" type="textarea" :placeholder="placeholder" @on-blur="inputBlur"
                       maxlength="500" show-word-limit ref="inputMessage" :autofocus="true"
                       :autosize="{minRows: 2,maxRows: 5}"/>
            </i-col>
            <i-col span="3">
              <div>
                <i-button @click="leaving">{{btnMessage}}</i-button>
              </div>
            </i-col>
          </Row>
        </Card>
      </i-col>
    </Row>
  </NavigationBar>
</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import {deleteMessage, insertMessage, listMessageVo, updateMessageTop} from "@/network/aboutMe";
  import moment from "moment";

  export default {
    name: "AboutMe",
    components: {
      NavigationBar
    },
    data() {
      return {
        btnMessage: '留言',
        placeholder: '留下宝贵的一言....',
        message: '',
        pageNo: 1,
        pageSize: 10,
        total: 0,
        //回复的留言
        parentMessageId: 0,
        messageList: []
      }
    },
    methods: {
      //留言
      leaving() {
        if(this.$store.state.token === '') {
          this.$Message.error({
            background: true,
            content: '请先登录！'
          })
          return;
        }
        if(this.message === '') {
          this.$Message.error({
            background: true,
            content: '留言不能为空！'
          })
          return;
        }
        insertMessage(this.parentMessageId, this.message, this.$store.state.user.userId)
        .then(res => {
          if(res.code === 2000) {
            this.$Message.success({
              background: true,
              content: '留言成功！'
            })
            //刷新
            this.listMessageVo();
            this.message = '';
            this.placeholder = '留下宝贵的一言....';
            this.parentMessageId = 0;
            this.btnMessage = '留言';
          }
        })
      },
      listMessageVo() {
        listMessageVo(this.pageNo, this.pageSize).then(res => {
          if(res.code === 2000) {
            this.messageList = res.data.messageVoList;
            this.total = res.data.total;
          }
        })
      },
      //回复
      reply(messageId, nickname) {
        this.parentMessageId = messageId;
        this.placeholder = '回复：' + nickname;
        this.btnMessage = '回复';
        this.$refs.inputMessage.focus();
      },
      //输入框失去焦点
      inputBlur() {
        if(this.message === ''){
          this.placeholder = '留下宝贵的一言....';
          this.parentMessageId = 0;
          this.btnMessage = '留言';
        }
      },
      //置顶
      updateTopping(messageId, top) {
        updateMessageTop(messageId, top).then(res => {
          if(res.code === 2000) {
            this.$Message.success({
              background: true,
              content: '更改成功！'
            })
            //刷新
            this.listMessageVo();
          }
        })
      },
      deleteMessage(messageId) {
        deleteMessage(messageId).then(res => {
          if(res.code === 2000) {
            this.$Message.success({
              background: true,
              content: '删除成功！'
            })
            //刷新
            this.listMessageVo();
          }
        })
      }
    },
    mounted() {
      //获取留言
      this.listMessageVo();
    },
    filters: {
      time: function (date) {
        return moment(date).startOf('hour').fromNow();
      }
    }
  }
</script>

<style scoped>
  .title {
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
  }
  .image {
    margin-top: 30px;
  }
  .reply {
    margin-left: 50px;
    margin-top: 20px;
  }
</style>
